<template>
    <div class="app-container">
        <div class="filter-container">

        </div>
        <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        >
            <el-table-column align="center" label="ID" min-width="80px">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" min-width="200px" label="轮播图">
                <template slot-scope="{row}">
                    <div style="width:100%;display:flex;align-items:center;justify-content: center;">
                        <el-image 
                        style="width: 80px; height: 80px"
                        :src="row.img" >
                        </el-image>
                    </div>
                </template>
            </el-table-column>

            <el-table-column align="center" label="跳转地址" min-width="380px">
                <template slot-scope="scope">
                    <span>{{ scope.row.link }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" min-width="100px" label="是否展示">
                <template slot-scope="{row}">
                <el-switch
                    v-model="row.hidden"
                    :active-value="0"
                    :inactive-value="1"
                    @change="switchChange($event, row)"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                ></el-switch>
                </template>
            </el-table-column>

            <el-table-column min-width="200px" align="center" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.createAt | parseTimeFormat('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button
                        @click="deletecarousel(scope.row.id)"
                        size="small"
                        type="danger"
                        icon="el-icon-delete"
                    >删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
import { carouselList, carouselDelete, carouselChangeShow } from "@/api/carousel";
import waves from "@/directive/waves"; // waves directive

export default {
    name: "CarouselList",
    components: { },
    directives: { waves },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                pageNo: 0,
                pageSize: 20,
                pageType: "A"
            }
        }
    },
    created(){
        this.getList();
    },
    methods: {
        // 获取轮播图
        getList() {
            console.log(this.listQuery);
            this.listLoading = true;
            carouselList(this.listQuery).then(response => {
                this.list = response.data;
                this.total = response.count;
                this.listLoading = false;
            });
        },
        // 删除轮播图
        deletecarousel(id) {
            let that = this
            this.$confirm('此操作将删除该轮播图, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                carouselDelete({
                    id: id
                }).then(res => {
                    if (res.success == true) {
                        this.$notify({
                            title: "删除成功",
                            message: "轮播图删除成功",
                            type: "success",
                            duration: 2000
                        });
                        that.getList();
                    }
                });
            }).catch(() => {
                return false;      
            });
        },
        // 切换状态
        switchChange(e, data){
            carouselChangeShow({id: data.id, hidden: data.hidden}).then(response => {});
        }
    }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>